<template>
  <div>
    <input type="checkbox" v-model="checkAll">
    <span>已完成{{finished}}</span>/<span>总共{{tasks.length}}</span>
    <!--直接调用父组件传递过来的方法-->
    <button @click.prevent="clearFinished">清空已勾选</button>
  </div>
</template>

<script>
  export default {
    name: "ListInfo",
    props: ["tasks", "clearFinished", "selectAll"],
    computed: {
      finished() {
        return this.tasks.reduce((preTotal, task) => preTotal + (task.check ? 1 : 0), 0);
      },
      // 当一个元素会受其他元素影响，同时该元素也会影响其他元素时，使用计算属性的get、set方法
      checkAll: {
        get() {
          return this.finished === this.tasks.length && this.tasks.length !== 0;
        },
        set(checkAll) {
          this.selectAll(checkAll);
        }
      }
    }
  }
</script>

<style scoped>

</style>
